import React, { Fragment } from 'react'
import './check.css'
import { Radio } from 'antd'

class Check extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      title: '问卷标题',
      endValue: '您已完成本次问卷，感谢您的帮助与支持',
      list: [],
      id: 0,
    }
  }

  twoInput = () => {
    let { list, id } = this.state
    let ownInput = {
      optionlist: [
        { option: '', id: id },
        { option: '', id: id + 1 },
      ],
    }
    ownInput.id = id + 1
    ownInput.title = ''
    ownInput.chooseType = 3
    this.setState({
      list: [...list, ownInput],
      id: id + 1,
    })
  }
  //点击单选增加单选的选项
  ownInput = () => {
    let { list, id } = this.state
    let ownInput = {
      optionlist: [
        { option: '', id: id },
        { option: '', id: id + 1 },
      ],
    }
    ownInput.id = id + 1
    ownInput.title = ''
    ownInput.chooseType = 2
    this.setState({
      list: [...list, ownInput],
      id: id + 1,
    })
  }
  addOption = (index) => {
    const { list, id } = this.state
    const option = [{ option: '', id: id + 1 }]
    list[index].optionlist = [...list[index].optionlist, ...option]
    this.setState({
      list,
      id: id + 1,
    })
  }
  //点击填空增加填空的选项
  addInput = () => {
    let { list, id } = this.state
    let inputObj = {}
    inputObj.id = id + 1
    inputObj.title = ''
    inputObj.chooseType = 1
    this.setState({
      list: [...list, inputObj],
      id: id + 1,
    })
  }
  setOptionValue = (e, index, optionIndex) => {
    const { list } = this.state
    list[index].optionlist[optionIndex].option = e.target.value
    this.setState({
      list,
    })
  }
  setInput = (e, index) => {
    const { list } = this.state
    if (index >= 0) {
      list[index].title = e.target.value
      this.setState({
        list,
      })
    }
  }
  //动态减少option里面的内容
  delOption = (index, optionIndex) => {
    const { list } = this.state
    if (list[index].optionlist.length === 2) {
      alert('最少保留两个选项')
      return
    }
    list[index].optionlist.splice(optionIndex, 1)
    this.setState({
      list,
    })
  }

  del = (index) => {
    const { list } = this.state
    list.splice(index, 1)
    this.setState({
      list,
    })
  }

  render() {
    const { title, endValue, list } = this.state
    return (
      <Fragment>
        {console.log(list)}
        <div className="start">
          <div className="head">
            <div className="title head-item">{title || '问卷标题'}</div>
            <div className="cat head-item">
              <button className="preview">预览</button>
              <button className="issue">发布</button>
            </div>
          </div>
        </div>
        <div className="main">
          <div className="main-type">
            <div className="type">
              <div className="type-title">题目类型</div>
              <div className="type-image">{/* <img alt="类型" /> */}</div>
            </div>
            <div className="choose" onClick={this.ownInput}>
              <div className="choose-icon">{/* <img alt="单选题" /> */}</div>
              <div className="choose-type">单选题</div>
            </div>
            <div className="choose" onClick={this.twoInput}>
              <div className="choose-icon">{/* <img alt="多选题" /> */}</div>
              <div className="choose-type">多选题</div>
            </div>
            <div className="choose" onClick={this.addInput}>
              <div className="choose-icon">{/* <img alt="填空题" /> */}</div>
              <div className="choose-type">填空题</div>
            </div>
          </div>
          <div className="main-content">
            <div className="check-title">
              <h1>问卷标题</h1>
              <div className="check-input-title"></div>
            </div>
            {/*暂时隐藏*/}
            {list.length === 0 && (
              <div className="tip">
                <div className="tip-icon"></div>
                <div>点击题目类型进行问卷设计吧</div>
              </div>
            )}

            {/*-----------------单选类型--------------*/}
            {list.map((item, index) => {
              if (item.chooseType === 2) {
                return (
                  <div className="person fill" key={item.id}>
                    <div className="fill-top">
                      <div className="fill-index">{index + 1}</div>
                      <div className="fill-right">
                        <h3>请选择一个选项(单选)</h3>
                        <div className="fill-box">
                          <input
                            className="fill-input"
                            type="text"
                            value={item.title}
                            onChange={(e) => this.setInput(e, index)}
                          />
                        </div>
                      </div>
                      <div className="fill-icon">
                        <div
                          className="fill-item"
                          onClick={() => this.addOption(index)}
                        >
                          {/* <img alt="题目增加选项" /> */}
                        </div>
                        <div className="fill-item fill-set">
                          {/* <img alt="题目设置" /> */}
                        </div>
                        <div
                          className="fill-item"
                          onClick={(e) => this.del(index)}
                        >
                          {/* <img alt="删除题目" /> */}
                        </div>
                      </div>
                    </div>
                    {/*循环option选项*/}
                    {item.optionlist.map((itemNode, optionIndex) => {
                      return (
                        <div className="fill-top" key={itemNode.id}>
                          <div className="fill-right">
                            <div className="fill-box fill-option">
                              <div>
                                <img className="radio" alt="" />
                              </div>
                              <Radio.Group>
                                <Radio value={1}>A</Radio>
                              </Radio.Group>
                              <input
                                className="fill-input options-input"
                                type="text"
                                onChange={(e) =>
                                  this.setOptionValue(e, index, optionIndex)
                                }
                                placeholder="选项"
                              />
                            </div>
                          </div>
                          <div className="fill-icon">
                            <div className="fill-item fill-set"></div>
                            <div
                              className="fill-item"
                              onClick={(e) =>
                                this.delOption(index, optionIndex)
                              }
                            ></div>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                )
              } else if (item.chooseType === 1) {
                return (
                  <div key={item.id}>
                    <div className="fill">
                      <div className="fill-top">
                        <div className="fill-index">{index + 1}</div>
                        <div className="fill-right">
                          <div className="fill-box">
                            <h3>请输入本项问卷内容</h3>
                            <input
                              className="fill-input"
                              type="text"
                              value={item.title}
                              onChange={(e) => this.setInput(e, index)}
                            />
                          </div>
                        </div>
                        <div className="fill-icon">
                          <div className="fill-item fill-set"></div>
                          <div
                            className="fill-item"
                            onClick={(e) => this.del(index)}
                          ></div>
                        </div>
                      </div>
                      <div className="fill-bottom">
                        <div className="fill-bottom-box"></div>
                      </div>
                    </div>
                  </div>
                )
              } else {
                return (
                  <div className="person fill" key={item.id}>
                    <div className="fill-top">
                      <div className="fill-index">{index + 1}</div>
                      <div className="fill-right">
                        <div className="fill-box">
                          <h3>请选择一个选项(多选)</h3>
                          <input
                            className="fill-input"
                            value={item.title}
                            onChange={(e) => this.setInput(e, index)}
                          />
                        </div>
                      </div>
                      <div className="fill-icon">
                        <div
                          className="fill-item"
                          onClick={() => this.addOption(index)}
                        ></div>
                        <div className="fill-item fill-set"></div>
                        <div
                          className="fill-item"
                          onClick={(e) => this.del(index)}
                        ></div>
                      </div>
                    </div>
                    {/*循环option选项*/}
                    {item.optionlist.map((itemNode, optionIndex) => {
                      return (
                        <div className="fill-top" key={itemNode.id}>
                          <div className="fill-right">
                            <div className="fill-box fill-option">
                              <div>
                                <img className="radio" alt="" />
                              </div>
                              <input
                                className="fill-input options-input"
                                type="text"
                                onChange={(e) =>
                                  this.setOptionValue(e, index, optionIndex)
                                }
                                placeholder="选项"
                              />
                            </div>
                          </div>
                          <div className="fill-icon">
                            <div className="fill-item fill-set"></div>
                            <div
                              className="fill-item"
                              onClick={(e) =>
                                this.delOption(index, optionIndex)
                              }
                            ></div>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                )
              }
            })}

            {/*-----------------多选--------------*/}
            <div className="finish">
              <div className="finish-title">
                <input
                  className="finish-title-input"
                  placeholder="点击编辑结束语"
                  value={endValue}
                  onChange={(e) => this.endChange(e)}
                />
              </div>
              <div className="submit issue">发布</div>
            </div>
          </div>
        </div>
      </Fragment>
    )
  }

  inputChange(e) {
    this.setState({
      title: e.target.value,
    })
  }

  endChange(e) {
    this.setState({
      endValue: e.target.value,
    })
  }
}

export default Check
